<script setup lang="ts">
import { nextTick, ref } from 'vue'
const detailRef = ref()
let detailHeight = ref<number | string>('0px')
const btnClick = async () => {
  await nextTick()
  if (detailRef.value.style.height && detailRef.value.style.height !== '0px') {
    detailRef.value.style.height = '0px'
    return
  }
  detailRef.value.style.height = 'auto'
  const { height } = detailRef.value?.getBoundingClientRect()
  detailRef.value.style.height = '0px'
  detailRef.value.offsetHeight
  detailRef.value.style.height = height + 'px'
}
</script>

<template>
  <div>
    <h1>高度自动过渡(方案三：JS)</h1>
    <div>
      <el-button class="btn" @click="btnClick">按钮</el-button>
      <div class="content">
        <!-- 文本 -->
        <div class="detail" ref="detailRef">
          Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
          Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
          Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
          Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
          Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
          Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.detail {
  width: 300px;
  transition: all 0.5s;
  overflow: hidden;
  height: 0px;
}
</style>
